<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8">
  <title>房贷计算器</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
  <meta hid="description" name="description" content="房贷计算器" />
  <!-- 引入样式 -->
  <link rel="stylesheet" href="css/minit-ui.css">

<style scoped>
  .bottom-title {
    font-size: 12px;
    text-align: center;
    width: 100%
  }

  input {
    position: absolute;
    right: 60px;
    top: 12px;
    border: none;
    height: 20px;
    text-align: right;
    padding: 2px;
    font-size: 18px;
  }

  select {
    position: absolute;
    right: 30px;
    bottom: 10px;
    width: 50%;
    height: 25px;
    font-size: 16px;
    line-height: 16px;
    border-radius: 5px;
    border: 1px solid #d9d9d9;
  }
  .mint-radiolist {
    display: inherit;
  }
  .mint-radiolist-label{
    padding: 0
  }
 .mint-radio-input:checked + .mint-radio-core {
   background-color:#f08300;
    border-color: #f08300;
 }
</style>
</head>

<body class="bodyBg">
  <div id="app">
    <mt-cell title="房屋面积">
      <input type="number" style="width:50%" v-model="area" />平方米
    </mt-cell>
    <mt-cell title="现成交价">
      <input type="number" style="width:50%;right:50px" v-model="price" />万元
    </mt-cell>
    <mt-cell title="增值税征收税">
      <input type="number" style="width:50%;right:30px" v-model="addTax" />%
    </mt-cell>
    <mt-cell title="个人所得税征收税率">
      <input type="number" style="width:35%;right:30px" v-model="selfTax" />%
    </mt-cell>
    <mt-cell title="住宅类型">
      <mt-radio v-model="type" :options="['住宅', '非住宅']">
      </mt-radio>
    </mt-cell>
       <mt-cell title="购房年限">
     
    </mt-cell>
    <mt-cell>
      <mt-radio  v-model="year" :options="['未满2年', '满2不满5', '满5年']">
    </mt-cell>
    <mt-cell title="买方第几房">
      <select v-model="homes">
    <option value="首套房">首套房</option>
    <option value="第二套房">第二套房</option>
    <option value="三套及以上">三套及以上</option>
  </select>
    </mt-cell>
    <mt-cell title="卖方唯一住房">
      <mt-radio v-model="isOnly" :options="['是', '否']">
    </mt-cell>
    <mt-button @click="submit()" type="primary" style="width: 90%;margin-left: 5%;background:#f08300;border-radius: 41px;">计算</mt-button>
    <p class="bottom-title">结果仅提供参考，其他费用以实际收费标准为准</p>
    <div v-show="isShow">
      <p class="bottom-title">小计：{{(results.total * 10000).toFixed(2)}}元</p>
      <p class="bottom-title">契税：{{(results.deedTax * 10000).toFixed(2)}}元</p>
      <p class="bottom-title">增值税：{{(results.addTax * 10000).toFixed(2)}}元</p>
      <p class="bottom-title">个人所得税：{{(results.selfTax * 10000).toFixed(2)}}元</p>
      <p class="bottom-title">印花税：{{(results.printTax * 10000).toFixed(2)}}元</p>
      <p class="bottom-title">土地增值税：{{(results.landTax * 10000).toFixed(2)}}元</p>
    </div>
  </div>
  <!-- built files will be auto injected -->
</body>
<!-- 引入组件库 -->
<script src="js/vue.js"></script>
<script src="js/mintUi.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data() {
      return {
        isShow: false,
        area: '', //房屋面积
        price: '', //现成交价
        addTax: '5.6', //增值税征收税率
        selfTax: '1.0', //个人所得税征收税率
        type: '住宅',
        year: '未满2年',
        homes: '首套房',
        isOnly: '是',
        results: {
          total: 0,
          deedTax: 0, //契税
          addTax: 0, //增值税
          selfTax: 0, //个人所得税
          printTax: 0, //印花税
          landTax: 0 //土地增值税
        }
      }
    },
    methods: {
      submit() {
        if (!this.area) {
          this.$toast('请输入房屋面积')
          return
        }
        if (!this.price) {
          this.$toast('请输入现成交价')
          return
        }
        if (!this.addTax) {
          this.$toast('请输入增值税征收率')
          return
        }
        if (!this.price) {
          this.$toast('请输入个人所得税征收率')
          return
        }
        this.calculation()
      },
      calculation() {
        this.isShow = true
        // 是否是住房
        if (this.type == '住宅') {
          // 是否大于90平
          if (this.area > 90) {
            // 第几房
            if (this.homes == '首套房' || this.homes == '第二套房') {
              // 是否三房以上
              this.results.deedTax = this.price * 0.01 //契税
            } else {
              this.results.deedTax = this.price * 0.03 //契税
            }
          } else {
            if (this.homes == '首套房') {
              // 是否三房以上
              this.results.deedTax = this.price * 0.01 //契税
            }
            if (this.homes == '第二套房') {
              this.results.deedTax = this.price * 0.02 //契税
            }
            if (this.homes == '三套及以上') {
              this.results.deedTax = this.price * 0.03 //契税
            }
          }
          if (this.year == '未满2年') {
            this.results.addTax = this.price * 0.056
          } else {
            this.results.addTax = 0
          }
          this.results.selfTax = this.price * 0.01
          this.results.printTax = 0
          this.results.landTax = 0
          this.results.total = this.results.deedTax + this.results.addTax + this.results.selfTax + this.results.printTax + this.results.landTax
        } else {
          // 非住宅
          this.results.deedTax = this.price * 0.03
          this.results.addTax = this.price * 0.056
          this.results.selfTax = this.price * 0.01
          this.results.printTax = this.price *0.001
          this.results.landTax = this.price *0.01
          this.results.total = this.results.deedTax + this.results.addTax + this.results.selfTax + this.results.printTax + this.results.landTax
        }
      }
    }
  })
</script>


</html>